<template>
  <view class="box">
    <!-- 自定义导航栏 -->
    <view class="box1">
      <uv-navbar :fixed="false" bgColor="#f7f8fa">
        <template v-slot:left>
          <view class="uv-nav-slot">
            <uv-icon
              name="map-fill"
              size="25"
              color="#008c8c"
              @click="openPicker"
            >
            </uv-icon
            >{{ dizhi }}
            <uv-picker
              ref="picker"
              :columns="columns"
              @confirm="confirm"
            ></uv-picker>
          </view>
        </template>
        <template v-slot:center>
          <view class="uv-nav-slot">
            <uv-input
              placeholder="输入关键字模糊查询"
              prefixIcon="search"
              prefixIconStyle="font-size: 22px;color: #909399"
              shape="circle"
              border="none"
            >
            </uv-input>
          </view>
        </template>
      </uv-navbar>
    </view>
    <!-- 轮播 -->
    <view class="box2">
      <uv-swiper
        :list="list"
        indicator
        indicatorMode="dot"
        circular
        height="400rpx"
      ></uv-swiper>
    </view>
    <!-- 新人下单有礼 -->
    <view class="box3">
      <view class="box3-top">
        新人下单有礼
        <text class="box3font1">返现奖励</text>
      </view>
      <view class="box3-bottom">
        <view class="box3-bottom1">
          <view>￥5</view>
          <view class="box3-bottom11">
            <uv-icon
              name="lock-opened-fill"
              size="20"
              label="第一单"
              color="#96979d"
              labelColor="#96979d"
            ></uv-icon>
          </view>
        </view>
        <view class="box3-bottom1">
          <view>￥10</view>
          <view class="box3-bottom11">
            <uv-icon
              name="lock-opened-fill"
              size="20"
              label="第二单"
              color="#96979d"
              labelColor="#96979d"
            ></uv-icon>
          </view>
        </view>
        <view class="box3-bottom1">
          <view>￥15</view>
          <view class="box3-bottom11">
            <uv-icon
              name="lock-opened-fill"
              size="20"
              label="第三单"
              color="#96979d"
              labelColor="#96979d"
            ></uv-icon>
          </view>
        </view>
      </view>
    </view>
    <!-- 告示 -->
    <view class="box4">
      <uv-notice-bar
        :text="text"
        bgColor="#e7f4f4"
        color="#008c8c"
      ></uv-notice-bar>
    </view>
    <!-- 宫格 -->
    <view class="box5">
      <uv-grid :col="4">
        <uv-grid-item
          v-for="(item, index) in baseList"
          :key="index"
          @click="geng(item.id, item.url)"
        >
          <uv-icon
            :customStyle="{ paddingTop: 20 + 'rpx' }"
            :name="item.name"
            :size="60"
          ></uv-icon>
          <text class="grid-text">{{ item.title }}</text>
        </uv-grid-item>
      </uv-grid>
    </view>
    <!--  -->
    <view class="box6">
      <image src="https://picsum.photos/200/300" mode=""></image>
    </view>
    <!--  -->
    <view class="box7">
      <view class="box7-top">
        <view class="box7-top1"> 师傅推荐 </view>
        <view class="box7-top2" @click="jump">
          更多<uv-icon name="arrow-right" size="18" color="#a6a6a6"></uv-icon>
        </view>
      </view>
      <view class="box7-bottom">
        <view class="bottom-top1" v-for="item in 3">
          <view class="photo">
            <image
              class="image2"
              src="/static/image/服务生.png"
              mode=""
            ></image>
            <view class="shadow">上次服务</view>
          </view>
          <view class="text1">这是师傅的名称</view>
          <view class="text2">已服务:234次</view>
        </view>
      </view>
    </view>
    <!-- 宫格2 -->
    <view class="box8">
      <uv-grid :col="4">
        <uv-grid-item
          v-for="(item, index) in baseList"
          :key="index"
          @click="geng(item.id, item.url)"
        >
          <uv-icon
            :customStyle="{ paddingTop: 20 + 'rpx' }"
            :name="item.name"
            :size="60"
          ></uv-icon>
          <text class="grid-text">{{ item.title }}</text>
        </uv-grid-item>
      </uv-grid>
    </view>
    <!-- 客服 -->
    <view class="box44" @click="ke">
      <uv-icon name="kefu-ermai" color="#000" size="30"></uv-icon>
      <view class="">客服</view>
    </view>
    <!-- 弹窗 -->
    <uv-popup ref="popup" mode="bottom" :closeable="true" bgColor="none">
      <view class="tanchu">
        <view class="">更多服务</view>
        <uv-grid :col="4">
          <uv-grid-item
            v-for="(item, index) in base_list"
            :key="index"
            @click="geng1(item.id)"
          >
            <image :src="item.image" mode=""></image>
            <text class="grid-text">{{ item.name }}</text>
          </uv-grid-item>
        </uv-grid>
      </view>
    </uv-popup>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { uniRequest } from "../../../utils/request/request";
const picker = ref(null);
const columns = ref([
  [
    "济南",
    "青岛",
    "淄博",
    "枣庄",
    "东营",
    "烟台",
    "潍坊",
    "济宁",
    "泰安",
    "威海",
    "日照",
    "滨州",
    "德州",
    "聊城",
    "临沂",
    "菏泽",
  ],
]);
const dizhi = ref("济南");
const list = ref([
  "https://cdn.uviewui.com/uview/swiper/swiper3.png",
  "https://cdn.uviewui.com/uview/swiper/swiper2.png",
  "https://cdn.uviewui.com/uview/swiper/swiper1.png",
]);
const text = ref(
  "uv-ui众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用"
);
const baseList = ref([
  {
    id: 1,
    name: "/static/image/服务生.png",
    title: "上门遛狗",
    url: "/pages/zhanghaodl/zhanghaodl",
  },
  {
    id: 2,
    name: "/static/image/服务生.png",
    title: "上门遛猫",
    url: "/pages/staydoor/staydoor",
  },
  {
    id: 3,
    name: "/static/image/服务生.png",
    title: "上门洗澡",
  },
  {
    id: 4,
    name: "/static/image/服务生.png",
    title: "上门美容",
  },
  {
    id: 5,
    name: "/static/image/服务生.png",
    title: "上门剪毛",
  },
  {
    id: 6,
    name: "/static/image/服务生.png",
    title: "上门训练",
  },
  {
    id: 7,
    name: "/static/image/服务生.png",
    title: "上门医生",
  },
  {
    id: 8,
    name: "/static/image/服务生.png",
    title: "更多服务",
    url: "#",
    geng: "geng",
  },
]);
const baseList1 = ref([
  {
    id: 1,
    name: "/static/image/dingdan.png",
    title: "上门遛狗",
    url: "/pages/zhanghaodl/zhanghaodl",
  },
  {
    id: 2,
    name: "/static/image/服务生.png",
    title: "上门遛猫",
    url: "/static/image/服务生.png",
  },
  {
    id: 3,
    name: "/static/image/服务生.png",
    title: "上门洗澡",
  },
  {
    id: 4,
    name: "/static/image/服务生.png",
    title: "上门美容",
  },
  {
    id: 5,
    name: "/static/image/服务生.png",
    title: "上门剪毛",
  },
  {
    id: 6,
    name: "/static/image/服务生.png",
    title: "上门训练",
  },
  {
    id: 7,
    name: "/static/image/服务生.png",
    title: "上门医生",
  },
  {
    id: 8,
    name: "/static/image/服务生.png",
    title: "服务介绍",
    url: "/pages/services/services",
  },
]);
const base_list = ref();

// 更多服务查询接口
onLoad(() => {
  uniRequest(
    "More/index?server=1",
    function (err, data) {
      if (err) {
        // 错误
        console.log(err);
      } else {
        base_list.value = data;
      }
    },
    "GET",
    {}
  );
});
const openPicker = () => {
  picker.value.open();
};
const confirm = (e) => {
  console.log("confirm", e.value[0]);
  dizhi.value = e.value[0];
};
const jump = () => {
  // console.log(e);
  uni.navigateTo({
    url: "/pages/sftj/sftj",
  });
};
const ke = () => {
  // console.log(e);
  uni.navigateTo({
    url: "/pages/exclusivecustomer/exclusivecustomer",
  });
};
const popup = ref();
const geng = (id, url) => {
  if (id == 8) {
    // console.log(id);
    popup.value.open();
  } else {
    uni.navigateTo({
      url: url,
    });
  }
};
const geng1 = (id) => {
  uni.navigateTo({
    url: `/pages/services/services?id=${JSON.stringify(id)}`,
  });
};
</script>

<style lang="scss">
@import url("index.css");
</style>
